<template>
    <div>
        <Row type="flex" justify="end">
            <Col span="3">
            <MenuItem class="sr_tools" name="" style="margin-top: 15px">
                <router-link to="/priceAdd">
                    <Button type="primary" icon="plus-circled"></Icon>新增</Button>
                </router-link>
            </MenuItem>
            </Col>
        </Row>
        <Table ref="washtable" :columns="columns" :data="tableData" class="table_wrapper" id="table_wrapper"></Table>


        <Modal v-model="modal_del" width="360" class-name="vertical-center-modal">

            <p slot="header" style="text-align:center">
                <span>洗衣模式</span>
            </p>
            <div style="text-align:center">
                <p>真的要删除吗？删除将无法看到洗衣模式详情</p>
            </div>
            <div slot="footer">
                <i-button type="error" @click="deleteOk">是</i-button>
                <i-button type="default" @click="deleteCancel">否</i-button>
            </div>

        </Modal>
    </div>
</template>
<script>
    import {PriceApi} from "../../../static/api/api";

    export default {
        data() {
            return {
                perSee: false,
                perDel: false,
                perEdit: false,
                modal_del: false,
                washModeId: "",
                delId: '',
                columns: [
                    {title: 'ID', key: 'id'},
                    {title: '名称', key: 'name'},
                    {title: '价格', key: 'price'},
                    {title: '洗衣时间', key: 'duration'},
                    {title: 'Icon', key: 'icon'},
                    {title: '洗衣模式', key: 'deviceMode'},
                    {
                        title: '操作', key: 'action', align: 'center', width: 300,
                        render: (h, params) => {
                            return [
                                this.delBtn(h, params),
                                this.editBtn(h, params)
                            ]
                        }
                    },
                ],
                tableData: []
            }
        },
        mounted: function () {
            this.$nextTick(function () {
                this.getPriceList();
            })
        },
        watch: {},
        methods: {
            getPriceList() {
                PriceApi.priceList().then(response => {
                    console.log(response);
                    response.map((v, i) => {

                        this.tableData.push({
                            id: v.id,
                            name: v.name,
                            price: v.price,
                            duration: v.duration,
                            icon: v.icon,
                            deviceMode: v.deviceMode
                        })
                    })
                }).catch(err => {

                })
            },
            unPerBtn(h, params, text) {
                return h('span', {
                    props: {type: 'info', size: 'small',},
                    style: {marginRight: '8px', cursor: 'pointer', color: '#ccc'},
                }, text)
            },
            seeBtn(h, params) {
                return h('span', {
                    props: {type: 'info', size: 'small',},
                    style: {marginRight: '8px', cursor: 'pointer', color: '#229ddd'},
                    on: {
                        click: () => {
                            //this.$router.push({path: 'shopSee',query:{id:this.tableData[params.index].id}});
                        }
                    }
                }, '查看')
            },
            delBtn(h, params) {
                return h('span', {
                    props: {type: 'info', size: 'small',},
                    style: {marginRight: '8px', cursor: 'pointer', color: '#229ddd'},
                    on: {
                        click: () => {
                            this.modalDel(params.index);

                        }
                    }
                }, '删除')
            },
            editBtn(h, params) {
                return h('span', {
                    props: {type: 'info', size: 'small',},
                    style: {marginRight: '8px', cursor: 'pointer', color: '#229ddd'},
                    on: {
                        click: () => {
                            this.$router.push({path: 'priceEdit', query: {id: this.tableData[params.index].id}});
                        }
                    }
                }, '编辑')
            },
            deleteOk() {
                this.modal_del = false;
                var formdata = new FormData();
                formdata.append('id', this.washModeId);
                PriceApi.priceDelete(formdata).then(res => {
                    this.tableData.splice(this.delId, 1);

                    /* if(res.status=='200'){
                       //this.$Message.success('Success!');
                     }*/

                }).catch(err => {
                    this.$Message.error('删除失败!');
                })
            },
            deleteCancel() {
                this.modal_del = false;
            },
            modalDel(index) {
                this.modal_del = true;
                this.delId = index;
                this.washModeId = this.tableData[index].id;
            },
        }

    }
</script>

<style>
    .table_wrapper {
        width: 100%;
        padding-bottom: 50px;
        border-bottom: none;
        margin-top: 10px
    }

    .ivu-table-body {
        overflow: hidden !important;
    }
</style>

